<template>
  <div>
    <el-dialog
        :visible.sync="dialogVisiable"
        title="通报预览"
        width="900px"
        append-to-body
        destroy-on-close
    >
      <div id="pdf" ref="print" class="print_pdf">
        <div class="page-head">
          <p style="margin-bottom: 0;padding-top: 10px;">焊接与锻热公司</p>
          <el-divider/>
        </div>
        <div id="content" class="page-cont">
          <div id="content_title">
            <h1 style="font-size: 28px;color: #3A71A8;padding-top: 20px;">{{content.title}}</h1>
            <h2 style="font-family: 仿宋,serif;">{{content.number}}</h2>
          </div>
          <div id="content_abstract">
            <h3 class="content_title_label">内容摘要:</h3>
            <p class="content_text">{{content.abstract}}</p>
          </div>
          <h3 class="content_title_label">具体问题:</h3>
          <el-table :data="content.defectList" :row-class-name="rowDefectIndex">
            <el-table-column label="序号" align="center" prop="index" width="56"/>
            <el-table-column label="工件" align="center" width="190">
              <template slot-scope="scope">
                {{content.defectList[scope.$index].partNumber}}{{content.defectList[scope.$index].partName}}
              </template>
            </el-table-column>
            <el-table-column label="问题分类" prop="defectClassification" align="center"/>
            <el-table-column label="责任人" align="center">
              <template slot-scope="scope">
                {{content.defectList[scope.$index].workersName}}
              </template>
            </el-table-column>
            <el-table-column label="罚款" prop="defectFine" align="center" width="80"/>
            <el-table-column label="问题图片" align="center" prop="photo" width="180">
              <template slot-scope="scope">
                <image-preview :src="scope.row.photo"/>
              </template>
            </el-table-column>
          </el-table>
          <div id="content_measure">
            <h3 class="content_title_label"><br>改进措施:</h3>
            <p class="content_text">{{content.measure}}</p>
          </div>
          <div>
            <p style="text-align: right;font-size: medium"><br>{{content.dept}}</p>
            <p style="text-align: right;font-size: medium">{{content.date}}</p>
          </div>
        </div>
<!--        <div class="page-foot" style="padding-bottom: 20px">-->
<!--          <el-divider/>-->
<!--          <span>第</span><span id="pageNumber">{{ currentPage }}</span-->
<!--        ><span>页</span>-->
<!--        </div>-->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-divider/>
        <el-button type="primary" @click="getNewPdf">下载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils/ruoyi'
import htmlToPdf from '@/utils/htmlToPdf';
import { PaperSizes } from '@/utils/PaperSizes'

export default {
  name: "ReportPreview",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form:{
      type:Object,
      default:{}
    },
  },
  data(){
    return{
      content:{},
      headerHeight: 80,
      footerHeight: 80,
      pageHeight: 0,
      pageWidth: 0,
      headEl: null, // 页眉
      footEl: null, // 页脚
      homeEl: null, // 封面
      els: [[]], // 合同内容
      totalPage: 0, // pdf总页码
      currentPage: 1,
      reportForm: {},
    }
  },
  mounted() {
    // 初始化
    this.init();
  },
  methods:{
    cancel() {
      this.dialogVisiable = false;
    },

    init() {
      this.generatePdfInstance = this.$generatePdfFile({
        headerHeight: this.headerHeight,
        footerHeight: this.footerHeight,
      });
      this.pageHeight = this.generatePdfInstance.options.a4H;
      this.pageWidth = this.generatePdfInstance.options.a4W;
    },
    getEls() {
      this.headEl = this.$refs.print.querySelector(".page-head");
      this.footEl = this.$refs.print.querySelector(".page-foot");
      this.homeEl = null;
      let part1El = this.$refs.print.querySelectorAll(".page-cont");
      this.els = [part1El];
      return {
        headEl: this.headEl,
        footEl: this.footEl,
        homeEl: this.homeEl,
        pagesEl: this.els,
        homeHeaderFlag: false,
        homeFooterFlag: false,
        pagesHeaderFlag: true,
        pagesFooterFlag: true,
      };
    },
    async getPdf(){
      let elsOptions = this.getEls();
      let info = await this.generatePdfInstance.generateFile(elsOptions);
      this.$modal.msgSuccess("即将开始下载文件，请稍等");
      this.generatePdfInstance.exportFile(this.content.title);
      this.generatePdfInstance.resetFile();
      this.$refs.print.querySelector("#pageNumber").innerHTML = "1";
    },
    async getNewPdf(){
      this.$modal.msgSuccess("即将开始下载文件，请稍等");
      htmlToPdf.getPdf(this.$refs.print,{
        title:this.content.title,
        paper:PaperSizes.A4
      });
    },
    reset(){
      const reportDate = parseTime(this.reportForm.reportDate, '{y}-{m}-{d}')
      const date = (reportDate || '').split("-");
      const deptName = this.reportForm.deptName;
      const deptAbb = this.reportForm.deptAbb;
      const reportNumber = this.reportForm.reportNumber;
      const fullDate = date[0]+"年"+date[1]+"月"+date[2]+"日";
      this.content = {
        title:deptAbb+"-"+this.reportForm.reportName+"自主考核通报"+reportNumber+"号",
        abstract:fullDate+"，"+deptName+'组织对实物质量自主管理情况进行现场检查,共检查出 '
            +this.reportForm.defectList.length+' 项问题，详情见问题明细。',
        date:fullDate,
        number:deptAbb+"质字["+date[0]+"] "+reportNumber+"号",
        defectList:this.reportForm.defectList,
        measure:this.reportForm.reportMeasure,
        dept:deptName,
      }
    },
    /** 质量问题序号 */
    rowDefectIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
  },
  watch:{
    dialogVisiable:{
      handler(newVal, oldVal) {
        if (newVal){
          this.reportForm = Object.freeze(this.form);
          this.reset();
        }
      },
    }
  },
  computed: {
    dialogVisiable: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}

::v-deep .el-divider--horizontal {
  margin-top: 0;
}

//打印样式
@media print {
  //不打印页脚的链接  --放在样式中
  @page {
    margin-top: 1mm;
    margin-bottom: 1mm;
    padding-top: 1mm;
  }
  //重要
  ::v-deep #app .content-container {
    width: 100% !important;
    // height: 100% !important;
    padding: 0 !important;
    // margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  //重要
  ::v-deep #app .main-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
</style>
<style>

.page-head {
  margin-bottom: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.page-cont{
  padding-left: 40px;
  padding-right: 40px;
}

.page-foot {
  padding-left: 40px;
  padding-right: 40px;
}

.content_title_label{
  font-size: large;
  padding-top: 20px;
  color: rgba(96,146,175,0.98);
  text-align: left;
}

.content_text{
  text-align: left;
  text-indent:2em;
  font-size: medium;
  line-height: 30px
}

.print_pdf{
  width: 840px;
  text-align: center;
  margin: auto;
  /*padding-right: 40px;*/
  /*padding-left: 40px;*/
}

</style>
